<template>
  <!-- 右侧菜单 -->
  <el-container
    v-loading="loading"
    class="ik-container"
  >
    <!-- 顶部标题信息 -->
    <el-header height="42px">
      <span class="ik-board-title">
        <span class="logo" />
        采购总貌
        <div class="time">
          <span>{{ time }}</span>
        </div>
      </span>
    </el-header>

    <!-- 数据区 -->
    <el-main>
      <!-- 关键参数区 -->
      <el-row
        :gutter="20"
        class="board-row"
      >
        <!-- 税价合计 -->
        <el-col
          :span="4"
          class="board-col"
          style="height: 150px"
        >
          <ik-label-base
            code="2"
            title="税价合计"
            main-value="1224.91"
            main-unit="万"
            :data="[
              {'key':'同比', 'value': '12.91'},
              {'key':'环比', 'value': '14.51'}
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="key"
          />
        </el-col>
        <!-- 采购次数 -->
        <el-col
          :span="4"
          class="board-col"
          style="height: 150px"
        >
          <ik-label-base
            code="2"
            title="采购次数"
            main-value="1262"
            main-unit=""
            :data="[
              {'key':'同比', 'value': '12.91'},
              {'key':'环比', 'value': '14.51'}
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="key"
          />
        </el-col>
        <!-- 采购次数 -->
        <el-col
          :span="4"
          class="board-col"
          style="height: 150px"
        >
          <ik-label-base
            code="2"
            title="收货次数"
            main-value="1221"
            main-unit=""
            :data="[
              {'key':'同比', 'value': '12.91'},
              {'key':'环比', 'value': '14.51'}
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="key"
          />
        </el-col>
        <!-- 到货及时率 -->
        <el-col
          :span="4"
          class="board-col"
          style="height: 150px"
        >
          <ik-label-base
            code="2"
            title="到货及时率"
            main-value="96.82%"
            main-unit=""
            :data="[
              {'key':'同比', 'value': '12.91'},
              {'key':'环比', 'value': '14.51'}
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="key"
          />
        </el-col>
        <!-- 到货合格率 -->
        <el-col
          :span="4"
          class="board-col"
          style="height: 150px"
        >
          <ik-label-base
            code="2"
            title="到货合格率"
            main-value="98.92%"
            main-unit=""
            :data="[
              {'key':'同比', 'value': '12.91'},
              {'key':'环比', 'value': '14.51'}
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="key"
          />
        </el-col>
        <!-- 退货税价 -->
        <el-col
          :span="4"
          class="board-col"
          style="height: 150px"
        >
          <ik-label-base
            code="2"
            title="退货税价"
            main-value="5.92"
            main-unit="万"
            :data="[
              {'key':'同比', 'value': '12.91'},
              {'key':'环比', 'value': '14.51'}
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="key"
          />
        </el-col>
      </el-row>

      <!-- 图表区 -->
      <el-row
        :gutter="20"
        class="board-row"
      >
        <!-- 物料采购Top10 -->
        <el-col
          :span="8"
          class="board-col"
          style="  height: 350px"
        >
          <ik-bar-base-chart
            code="1-1"
            title="物料采购Top10"
            :data="[
              {'key':'物料1', 'value': '84.63'},
              {'key':'物料2', 'value': '81.72'},
              {'key':'物料3', 'value': '78.37'},
              {'key':'物料4', 'value': '73.42'},
              {'key':'物料5', 'value': '71.71'},
              {'key':'物料6', 'value': '68.10'},
              {'key':'物料7', 'value': '66.39'},
              {'key':'物料8', 'value': '64.03'},
              {'key':'物料9', 'value': '61.18'},
              {'key':'物料10', 'value': '60.35'}
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="key"
          />
        </el-col>
        <!-- 财务主体ABC构成 -->
        <el-col
          :span="8"
          class="board-col"
          style="  height: 350px"
        >
          <ik-bar-stack-chart
            code="1-2"
            title="财务主体ABC构成"
            :data="[
              {'area':'主体1', 'type':'A类', 'value': '84.63'},
              {'area':'主体1', 'type':'B类', 'value': '14.52'},
              {'area':'主体1', 'type':'C类', 'value': '4.64'},
              {'area':'主体2', 'type':'A类', 'value': '197.72'},
              {'area':'主体2', 'type':'B类', 'value': '27.34'},
              {'area':'主体2', 'type':'C类', 'value': '8.67'},
              {'area':'主体3', 'type':'A类', 'value': '251.24'},
              {'area':'主体3', 'type':'B类', 'value': '20.16'},
              {'area':'主体3', 'type':'C类', 'value': '9.98'},
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="area"
            second-analysis-dimension-field="type"
          />
        </el-col>
        <!-- 供应商采购Top10 -->
        <el-col
          :span="8"
          class="board-col"
          style="  height: 350px"
        >
          <ik-bar-base-chart
            code="1-3"
            title="供应商采购Top10"
            :data="[
              {'key':'供应商1', 'value': '84.63'},
              {'key':'供应商2', 'value': '81.72'},
              {'key':'供应商3', 'value': '78.37'},
              {'key':'供应商4', 'value': '73.42'},
              {'key':'供应商5', 'value': '71.71'},
              {'key':'供应商6', 'value': '68.10'},
              {'key':'供应商7', 'value': '66.39'},
              {'key':'供应商8', 'value': '64.03'},
              {'key':'供应商9', 'value': '61.18'},
              {'key':'供应商10', 'value': '60.35'}
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="key"
          />
        </el-col>
        <!-- 物料退货比例 -->
        <el-col
          :span="6"
          class="board-col"
          style="  height: 350px"
        >
          <ik-pie-base-chart
            code="2-1"
            title="物料退货比例"
            :data="[
              {'key':'物料1', 'value': '1.63'},
              {'key':'物料2', 'value': '2.72'},
              {'key':'物料3', 'value': '1.37'}
            ]"
            data-dimension-field="value"
            analysis-dimension-field="key"
          />
        </el-col>
        <!-- 采购时序 -->
        <el-col
          :span="12"
          class="board-col"
          style="  height: 350px"
        >
          <ik-line-time-chart
            code="2-2"
            title="采购时序"
            :data="[
              { type: '主体1', time: '2024-01-01 00:00:00', value: '72.97' },
              { type: '主体2', time: '2024-01-01 00:00:00', value: '62.94' },
              { type: '主体3', time: '2024-01-01 00:00:00', value: '87.75' },
              { type: '主体4', time: '2024-01-01 00:00:00', value: '77.87' },
              { type: '主体1', time: '2024-02-01 00:00:00', value: '39' },
              { type: '主体2', time: '2024-02-01 00:00:00', value: '39' },
              { type: '主体3', time: '2024-02-01 00:00:00', value: '39' },
              { type: '主体4', time: '2024-02-01 00:00:00', value: '39' },
              { type: '主体1', time: '2024-03-01 00:00:00', value: '39' },
              { type: '主体2', time: '2024-03-01 00:00:00', value: '39' },
              { type: '主体3', time: '2024-03-01 00:00:00', value: '39' },
              { type: '主体4', time: '2024-03-01 00:00:00', value: '39' },
              { type: '主体1', time: '2024-04-01 00:00:00', value: '39' },
              { type: '主体2', time: '2024-04-01 00:00:00', value: '39' },
              { type: '主体3', time: '2024-04-01 00:00:00', value: '39' },
              { type: '主体4', time: '2024-04-01 00:00:00', value: '39' },
            ]"
            time-dimension-start="2024-01-01 00:00:00"
            time-dimension-end="2024-04-01 00:00:00"
            time-dimension-uom="month"
            time-dimension-field="time"
            data-dimension-field="value"
            analysis-dimension-field="type"
          />
        </el-col>
        <!-- 供应商退货比例 -->
        <el-col
          :span="6"
          class="board-col"
          style="  height: 350px"
        >
          <ik-pie-base-chart
            code="2-3"
            title="供应商退货比例"
            :data="[
              {'key':'供应商1', 'value': '2.13'},
              {'key':'供应商2', 'value': '2.92'},
              {'key':'供应商3', 'value': '2.67'},
              {'key':'供应商4', 'value': '1.67'}
            ]"
            data-dimension-field="value"
            analysis-dimension-field="key"
          />
        </el-col>
      </el-row>
    </el-main>

    <!-- 底部页脚信息 -->
    <el-footer height="36px">
      <el-row :gutter="0">
        <el-col :span="12">
          <span class="ik-footer-info" style="float: left">底部标签</span>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>

// bar
import IkBarBaseChart from "@/components/ik/board/chart/bar/base/IkBarBaseChart"
import IkBarStackChart from "@/components/ik/board/chart/bar/stack/IkBarStackChart"
import IkLineTimeChart from "@/components/ik/board/chart/line/time/IkLineTimeChart"
import IkPieBaseChart from "@/components/ik/board/chart/pie/base/IkPieBaseChart"
// label
import IkLabelBase from "@/components/ik/board/label/IkLabelBase"

export default {
  components: {
    // Chart
    IkBarBaseChart,
    IkBarStackChart,
    IkLineTimeChart,
    IkPieBaseChart,
    IkLabelBase
  },
  props: {
  },
  data() {
    return {
      pagination: {
        pageNo: 1,
        pageSize: 20,
        totalCount: 5
      },
      loading: false,
      listLoading: false,
      sysTitle: '',
      timer: null,
      time: '2024-04-28 00:00:00'
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const $this = this
    $this.timer = setInterval(function() {
      $this.$set($this, 'time', new Date().toLocaleString())
    }, 1000)
  },
  beforeDestroy() {
    // 清楚定时器
    clearInterval(this.timer)
  },
  methods: {
  }
}
</script>

<style lang="scss" >
@import "~@/components/ik/board/styles/board.scss";
.ik-container {
  position: relative;
  width: 100%;
  min-height: 1080px;
  background-image: url("~@/assets/robot/bgmap2.png");
  overflow: auto !important;
}
.el-header {
  position: absolute;
  z-index: 99;
  top: 0;
  height: 42px;
  width: 100%;
  background-image: url("~@/assets/ik/images/board/title.png");
  background-size: 100% 100%;
  color: white;
  font-weight: 800;
  line-height: 50px;
  text-align: center;
  .logo {
    position: absolute;
    left: 0;
    height: 42px;
    width: 155px;
    background-image: url("~@/assets/robot/logo.png");
    background-size: 100% 100%;
  }
  .time {
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 50px;
    font-size: 13px;
    height: 50px;
    span {
      vertical-align: middle;
    }
  }
}

.el-main {
  position: relative;
  top: 42px;
  height: calc(100vh - 88px);
  padding: 0px;
  text-align: center;
}

.el-footer {
  height: 36px;
  background-color: #1482f0;
  color: #FFFFFF;
  /* 页脚 */
  .ik-footer-info {
    height: 36px;
    line-height: 36px;
    background-color: #1482f0;
    color: #FFFFFF;
  }
}
</style>
